<template>
	<view class="background">
		<!-- <view class="status-contents">
			<view class="status top-view"></view>
		</view> -->
		<!-- 筛选 -->
		
		
		<view class="searchBox">
			<!-- #ifndef MP-WEIXIN -->
			<view class="backLast" @click="back">
				<image src="http://rs.eonfox.cc/clzy/static/left.png" class="back"></image>
			</view>
			<!-- #endif -->
			
			<view class="searchCon">
				<image src="http://rs.eonfox.cc/clzy/static/search.png" class="searchImage"></image>
				<input type="text" v-model="searchData" :placeholder="searchData" @confirm="search"/>
				<image src="http://rs.eonfox.cc/clzy/static/delet.png" class="searchImage"></image>
			</view>
			<image src="http://rs.eonfox.cc/clzy/static/lattice.png" class="selectedStyle"></image>
		</view>
		<view class="choiceTop">
			<view class="choiceText show">
				<text>综合</text>
				<image src="http://rs.eonfox.cc/clzy/static/bottom.png" class="choiceImg"></image>
			</view>
			<view class="choiceText">
				<text>销量</text>
			</view>
			<view class="choiceText">
				<text > 价格 </text>
				<view class="choiceImg choiceImgbox">
					<image src="http://rs.eonfox.cc/clzy/static/top.png" class="choiceImage"></image>
					<image src="http://rs.eonfox.cc/clzy/static/bottom.png" class="choiceImage"></image>
				</view>
			</view>
			<view class="choiceText">
				<text>逛超市</text>
			</view>
			<view class="choiceText" @click="filtrate">
				<text>筛选</text>
				<image src="http://rs.eonfox.cc/clzy/static/screen.png" class="choiceImg"></image>
			</view>
		</view>
		
		<view class="main" v-if="searchList!=''">
			<view class="commodity" v-for="(item) in searchList" @click="datail(item.id)">
				<view class="commodityLeft">
						<image :src="qiniu+item.image_id+'?imageView2/1/w/160'"  class="commodityImage"></image>
				</view>
				<view class="commodityRight">
					<view class="commodityBrand">
						<image  :src="item.brandImage" class="brandImage"></image>
						<text>{{item.brandInfo}}</text>
					</view>
					<view class="name">
						<text>{{item.name}} {{item.info}}</text>
					</view>
					<view class="type">
						<text>{{item.label}}</text>
					</view>
					<view class="price">
						<text class="allPrice">￥{{item.money_max/100}}</text>
						<text class="onePrice">单件￥{{item.money_min/100}}</text>
					</view>
					<view class="commodityType">
						<text class="business" v-if="item.type!=''">{{item.type}}</text>
						<text class="special ">特价</text>
						<text class="evaluate">{{item.assess}}条评价</text>
						<text class="goodEvaluate">{{item.goodPraise}}%好评</text>
					</view>
				</view>
			</view>
		</view>
		<view class="null" v-else>该分类暂无商品</view>
		<uni-drawer :visible="display" mask="true" mode="right">
				<view class="filtrateBox">
					<view class="filtrateTitle">
						<text>名字</text>
					</view>
					<view class="filtrateContent">
						<text>视屏</text>
						<text>1234</text>
					</view>
					<view class="cut-off">
					</view>
					<view class="priceBox">
						<view class="priceTitle">
							<text>价格区间</text>
						</view>
						<view class="priceContent">
								<input type="text" value=""  placeholder="最低价"/>
						        <text style="margin: 0 10px;"> — </text>
								<input type="text" value="" placeholder="最高价" />
							
						</view>
					</view>
					<view class="ButtonBox">
						<view class="reset">
							<text>重置</text>
						</view>
						<view class="affirm" @click="filtrate">
							<text>确认</text>
						</view>
					</view>
				</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import eonfox from '@/components/eonfox/eonfox.js';
	import fns from '@/components/eonfox/fns.js';
	var ef = new eonfox();
	export default {
		data() {
			return {
				type_id:'',
				searchData:'',
				display:false,
				qiniu:'',
				searchList:[
					{
						id:'fxbns',
						image_id:'http://rs.eonfox.cc/clzy/static/raw_1521984570.png',
						brandImage:'http://rs.eonfox.cc/clzy/static/raw_1522223516.png',
						brandInfo:'韩国直采 品牌直采',
						title:'3件装|MEDIHEAL 美迪惠尔N.M.F针剂水库保湿面膜 10片/盒',
						label:'收敛毛孔|任何肤质|贴片式',
						type:'自营',
						allPrice:168,
						onePrice:25.4,
						assess:3014,
						goodPraise:98.2
					}
				]
			};
		},
		components: {uniDrawer},
		onLoad(option){
			var	data=option.data;
			if(option.id){
				this.type_id=option.id
			}
			this.searchData=data;
			var _this=this
			// this.load();
			console.log('传过来的值',option);
			ef.submit({
				request:{
					list:['SHOPGOODSLIST',[{search:{type_id:_this.type_id}}]],
					config: ['APPLICATIONCONFIG'],
				},
				callback(data){
					console.log('callback',data);
					var arr=fns.checkError(data,'list',function(errno,error){
						fns.err(error)
					})
					console.log('callback',arr);
					if(arr.config && arr.config.qiniu_domain){
						_this.qiniu=arr.config.qiniu_domain
					}
					if(arr.list.data){
						_this.searchList=arr.list.data
					}
				},
				error(err){
					fns.err('err',err,1)
				}
				
			})
		},
		methods:{
			back(){
				uni.navigateBack({
					deta:1
				})
			},
			search(){
				var data=this.searchData;
				uni.redirectTo({
					url:'../../pagesB/search-result/search-result?data='+data
				})
			},
			datail(id){
				uni.navigateTo({
					url:'../goodsDetails/goodsDetails?id='+id
				})
			},
			filtrate(){
				var that=this;
				that.display=!that.display;
			},
// 			load(){
// 				var that=this;
// 				ef.submit({
// 					request:{
// 						s: ['SHOPGOODSTYPELIST']
// 					},
// 					callback: function(data) {
// 						console.log('回调成功', data);
// 
// 							
// 							
// 							},
// 				
// 					error: function(err) {
// 						uni.showToast({
// 							title:'出错啦',
// 							icon:'none'
// 						})
// 					}
// 					
// 				});
// 			}
			
		}
	}
</script>

<style>
	.background{
		background: #ABABAB;
	}
	.status-contents{
		height: var(--status-bar-height);
	}
	.top-view{
		width: 100%;
		position: fixed;
		top: 0;
	}
	.status{
		height:var(--status-bar-height);
	}
	.filtrateBox{
		height: 93%;
		position: absolute;
		background-color: #FFFFFF;
		right:0px;
		padding:3%;
		width: 90%;
	}
	.filtrateTitle{
		width: 100%;
		height: 70upx;
		font-size: 28upx;
		color: #333333;
		line-height: 70upx;
		padding: 20upx;
	}
	.filtrateContent{
		width: 100%;
		height: auto;
	}
	.filtrateContent text{
		width: auto;
		font-size: 24upx;
		text-align: center;
		padding: 10upx 15upx;
		background-color: #eee;
		border-radius: 15px;
		margin-right: 20upx;
		font-size: 24upx;
		color: #333333;
	}
	.cut-off{
		width: 100%;
		height: 5upx;
		background-color: #eee;
		margin:50upx 0upx ;
	}
	.priceBox{
		width: 100%;
		height: auto;
	}
	.priceTitle{
		width: 100%;
		height: 70upx;
		font-size: 28upx;
		color: #333333;
		line-height: 70upx;
		padding:0upx 20upx;
	}
	.priceContent{
		width: 100%;
		height: auto;
	}
	.priceContent text{
		float: left;
		
	}
	.priceContent input{
		float: left;
		width:120upx;
		font-size: 24upx;
		text-align: center;
		/* padding: 15upx 30upx; */
		background-color: #eee;
		border-radius: 15px;
		
	}
	.ButtonBox{
		width: 100%;
		height:60upx;
		position:absolute;
		background-color:#eee;
		float: left;
		bottom:10px;
		font-size: 28upx;
	}
	.reset text{
		float: left;
		width: 50%;
		height: 80upx;
		text-align: center;
		background-color: #E6E6E6;
		line-height: 80upx;
	}
	.affirm text{
		float: left;
		width:44%;
		height: 80upx;
		text-align: center;
		background-color: #DD524D;
		line-height: 80upx;
	}
	.null{
		text-align:center;
background-color:#fff;
color:grey;
	}
</style>
<style  scoped lang="stylus" ref="stylesheet/stylus">
	.searchBox
		width 100%
		height 50px
		background #fff
		display flex
		align-items center   
		justify-content space-around
		flex-direction row
		 /*#ifdef APP-PLUS*/
		margin-top 70upx
		/* #endif */
		.backLast
			.back
				width 20px
				height 20px
		.searchCon
			width 80%
			height 40px
			background #EAEBED
			border-radius 15upx
			display flex
			align-items center   
			justify-content center
			flex-direction row
			.searchImage
				width 25px
				height 20px
				padding 0 20upx
		.selectedStyle
			width 25px
			height 20px
	.choiceTop
		height 50px
		width 100%
		display flex
		align-items center   
		justify-content center
		flex-direction row
		background #fff
		border-bottom 1upx solid #eee
		border-top 1upx solid #eee
		.choiceText
			width 25%
			height 100%
			font-size 28upx
			color #B3B3B3 
			font-weight 600
			display flex
			align-items center   
			justify-content center
			flex-direction row
			.choiceImg
				width 20upx
				height 20upx
			.choiceImgbox
				width 20upx
				height 40upx
				display flex
				align-items center   
				justify-content center
				flex-direction column
				margin-left 5upx
				.choiceImage
					width 20upx
					height 20upx
		.show
			color #E60B30
	.main
		width 100%
		background #fff
		.commodity
			width 100%
			height 135px
			display flex
			align-items center   
			justify-content center
			flex-direction row
			.commodityLeft
				width 135px
				height 135px
				display flex
				align-items center   
				justify-content center
				flex-direction row
				.commodityImage
					width 100px
					height 100px
			.commodityRight
				width calc(100% - 135px)
				height 100%
				border-bottom 1upx solid #eee
				.commodityBrand
					margin 3px 0
					color #ABABAB
					display flex
					align-items center   
					justify-content flex-start
					flex-direction row
					font-size 23upx
					.brandImage
						width 15px
						height 15px
				.name
					font-size 30upx
					font-weight 600
				.type
					font-size 23upx
					height 16px
					margin 3px 0
					color #ABABAB
				.price
					font-size 23upx
					color #ABABAB
					height 16px
					.allPrice
						font-size 28upx
						font-weight 600
						color #E60B30
				.commodityType
					height 16px
					margin 5px 0
					font-size 23upx
					display flex
					color #ABABAB
					// align-items center   
					// justify-content flex-start
					flex-direction row
					.business
						padding 0 2px
						color #E60B30
						border 1px solid #E60B30
					.special
						color #fff
						padding 0 2px
						background #E60B30
						margin 0 3px
</style>
